<template>
	<template v-if="dateType === 'time'">
		<a-time-picker
			:class="[
				'app-editor-container',
				'app-date-picker',
				`app-date-picker-${name}`,
			]"
			v-model:value="curValue"
			:format="format"
			:placeholder="
				placeholder ? placeholder : $t('common.datepicker.placeholder')
			"
			:inputReadOnly="readOnly"
			:disabled="disabled || readOnly"
			@blur="onBlur"
			@focus="onFocus"
			@change="onChange"
		/>
	</template>
	<template v-else-if="dateType === 'date'">
		<a-date-picker
			:class="[
				'app-editor-container',
				'app-date-picker',
				`app-date-picker-${name}`,
			]"
			v-model:value="curValue"
			:format="format"
			picker="date"
			:placeholder="
				placeholder ? placeholder : $t('common.datepicker.placeholder')
			"
			:inputReadOnly="readOnly"
			:disabled="disabled || readOnly"
			@blur="onBlur"
			@focus="onFocus"
			@change="onChange"
		/>
	</template>
	<template v-else>
		<a-date-picker
			showTime
			:class="[
				'app-editor-container',
				'app-date-picker',
				`app-date-picker-${name}`,
			]"
			v-model:value="curValue"
			:format="format"
			:placeholder="
				placeholder ? placeholder : $t('common.datepicker.placeholder')
			"
			:inputReadOnly="readOnly"
			:disabled="disabled || readOnly"
			@blur="onBlur"
			@focus="onFocus"
			@change="onChange"
		/>
	</template>
</template>
<script setup lang="ts">
import { IEvent } from '@/core';
import { computed, Ref } from 'vue';
import dayjs from 'dayjs';
import { datePickerProps } from './date-picker';
import { useEditorTypeParams } from '@/hooks/use-editor';
interface EditorEmit {
	(name: 'component-action', value: IEvent<string>): void;
}
const props = defineProps(datePickerProps);
const emit = defineEmits<EditorEmit>();
// 类型校验
const { validateConfig } = useEditorTypeParams();
validateConfig();
let curValue: Ref<any> = computed(() => {
	if (props.value) {
		return dayjs(props.value);
	} else {
		return '';
	}
});
const onChange = (date: any, dateString: string) => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'valueChange',
		data: dateString,
	});
};

const onBlur = () => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'editorBlur',
		data: curValue,
	});
};
const onFocus = () => {
	emit('component-action', {
		name: `${props.name}`,
		action: 'editorFocus',
		data: curValue,
	});
};

</script>
